<template>
  <view class="page-content">
    <view class="pay-success-main">
      <view class="pay-success">
        <uni-icons type="checkbox-filled" size="60" color="#2cdeb4"></uni-icons>
        <view class="pay-success-text">支付成功</view>
      </view>
    </view>
    <view class="pay-success-order">
      <up-cell-group :border="false">
        <up-cell
          title="编号"
          :value="orderInfo.orderNum"
          :border="false"
        ></up-cell>
        <up-cell
          title="金额"
          :value="orderInfo.totalPrice"
          :border="false"
        ></up-cell>
        <up-cell
          title="类型"
          :value="orderInfo.goodsName"
          :border="false"
        ></up-cell>
      </up-cell-group>
    </view>
    <view class="pay-success-btn footer">
      <view class="pay-success-btn-main">
        <up-button
          type="primary"
          shape="circle"
          text="订单详情"
          @click="openDetail()"
        ></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { GetOrderInfo } from "@/api/my.js";
import { orderStatusMp } from "@/utils/common";

let isCurrent = ref(1);
let textValue = ref("");
let orderInfo = ref({});
const props = defineProps({
  orderId: String,
});
const GetOrderInfoDetail = async () => {
  try {
    let params = {
      id: props.orderId,
    };
    uni.showLoading({
      title: "加载中",
    });
    let { data } = await GetOrderInfo(params);
    console.log(data, "data");
    orderInfo.value = data;
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
  }
};

onMounted(() => {
  GetOrderInfoDetail();
});

const openDetail = () => {
  uni.navigateTo({
    url: "/pages/mine/orderList/detail?id=" + orderInfo.value.id,
  });
};
</script>

<style scoped lang="scss">
.page-content {
  padding: 0 20rpx 0 20rpx;
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(0, 0, 0, 0.1)
  );
}
.pay-success-main {
  background: #fff;
  margin: 0 20rpx;
  border-radius: 16rpx;
  padding: 60rpx 0;
  display: flex;
  justify-content: center;
  text-align: center;
  .pay-success-text {
    color: #999;
    margin-top: 5rpx;
  }
}
.pay-success-order {
  margin: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
}
.pay-success-btn {
  width: 30vw;
  position: fixed;
  left: 35vw;
  bottom: 0;
  padding-bottom: 40rpx;
}
</style>
